﻿<div class="creat_head">
    <div class="creat_head_con clearfix">
        <div class="creat_logo hidden">
            <a href="/index/appindex" ng-click="stopCopy()">
                <img ng-src="{{CLIENT_CDN}}assets/images/logo.png" />
            </a>
        </div>
        <div class="creat_con clearfix" style="float: none; position: absolute; margin-left: -255px; left: 50%; "> 
            <ul class="comp_panel clearfix">
                <li class="itpl" ng-click="clearSelectedElements();">
                    <span>
                        模版
                    </span>
                </li>
                <li comp-draggable="panel" ctype="3" class="comp-draggable bg" title="请拖动到编辑区域"
                    ng-click="createComp('3');">
                    <span>
                        背景
                    </span>
                </li>
                <li comp-draggable="panel" ctype="4" class="comp-draggable image" title="请拖动到编辑区域"
                    ng-click="createComp('4');">
                    <span>
                        图片
                    </span>
                </li>
                <li comp-draggable="panel" ctype="h" class="comp-draggable shape" title="请拖动到编辑区域"
                    ng-click="createComp('h');">
                    <span>
                        图形
                    </span>
                </li>
                <li comp-draggable="panel" ctype="2" class="comp-draggable text" title="请拖动到编辑区域"
                    ng-click="createComp('2');">
                    <span>
                        文本
                    </span>
                </li>
                <li comp-draggable="panel" ctype="9" class="comp-draggable music hidden" title="请拖动到编辑区域"
                    ng-click="createComp('9');">
                    <span>
                        音乐
                    </span>
                </li>
                <li comp-draggable="panel" ctype="v" class="comp-draggable vedio hidden" title="请拖动到编辑区域"
                    ng-click="createComp('v');">
                    <span>
                        视频
                    </span>
                </li>
                <li comp-draggable="panel" ctype="g101" class="comp-draggable contact"
                    title="请拖动到编辑区域" ng-click="createCompGroup('g101');">
                    <span>
                        表单
                    </span>
                </li>
                <li comp-draggable="panel" ctype="8" class="comp-draggable phone" title="请拖动到编辑区域"
                    ng-click="createComp('8');">
                    <span>
                        按钮
                    </span>
                </li>
                <li comp-draggable="panel" class="comp-draggable more" ng-mouseenter="showother();" style="display:none;"
                    ng-mouseleave="hideother($event);">
                    <span>
                        <a id="toggle_button" class="page_effect">
                            更多
                        </a>
                    </span>
                </li>
                <ul id="moreoption" style="overflow: hidden;" ng-mouseenter="showother();"
                    ng-mouseleave="hideother($event);">
                    <li comp-draggable="panel" ctype="p" class="comp-draggable images" title="请拖动到编辑区域"
                        ng-click="createComp('p');">
                        <span>
                            图集
                        </span>
                    </li>
                    <li class="texiao" ng-click="openPageSetPanel()">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                特效
                            </a>
                        </span>
                    </li>
                    <li class="tape" ctype="a" ng-click="createComp('a');">
                        <span>
                            录音
                        </span>
                    </li>
                    <li comp-draggable="panel" ctype="m" class="comp-draggable ditu" ng-click="createComp('m');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                地图
                            </a>
                        </span>
                    </li>
                    <li comp-draggable="panel" ctype="l" class="comp-draggable lottery" title="请拖动到编辑区域"
                        ng-click="createComp('l');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                抽奖
                            </a>
                        </span>
                    </li>
                    <li comp-draggable="panel" ctype="t" class="comp-draggable vote" title="请拖动到编辑区域"
                        ng-click="createComp('t');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                投票
                            </a>
                        </span>
                    </li>
                    <li comp-draggable="panel" ctype="i" class="comp-draggable interact" title="请拖动到编辑区域"
                        ng-click="createComp('i');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                互动
                            </a>
                        </span>
                    </li>
                    <li style="display:none" comp-draggable="panel" ctype="5" class="comp-draggable textarea"
                        title="请拖动到编辑区域" ng-click="createComp('5');" ng-mouseenter="showother();">
                        <span>
                            输入框
                        </span>
                    </li>
                    <li style="display:none" comp-draggable="panel" ctype="6" class="comp-draggable button"
                        title="请拖动到编辑区域" ng-click="createComp('6');" ng-mouseenter="showother();">
                        <span>
                            按钮
                        </span>
                    </li>
                    <li style="display:none" comp-draggable="panel" ctype="z" ng-mouseenter="showother();"
                        ng-mouseleave="hideother($event);" class="comp-draggable dianzan" title="请拖动到编辑区域"
                        ng-click="createComp('z');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                送祝福
                            </a>
                        </span>
                    </li>
                    <li style="display:none" comp-draggable="panel" ctype="q" class="comp-draggable chat"
                        title="请拖动到编辑区域" ng-click="createComp('q');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                留言
                            </a>
                        </span>
                    </li>
                    <li comp-draggable="panel" ctype="s" style="display:none" class="comp-draggable product"
                        title="请拖动到编辑区域" ng-click="createComp('s');">
                        <span>
                            <a id="toggle_button" class="page_effect">
                                产品溯源
                            </a>
                        </span>
                    </li>
                </ul>
            </ul>
        </div>
        <div class="create-action">
            <ul>
                <li class="act-border save">
                    <span class="create-save" ng-click="saveProduct()">
                        保存
                    </span>
                </li>
                <li class="publish">
                    <span class="create-publish" ng-click="previewProduct()">
                        预览
                    </span>
                </li>
                <li class="act-border setting" ng-class="{'active': sceneSetting.showFlag}"
                    ng-click="sceneSetting.showFlag=!sceneSetting.showFlag">
                    <span class="create-setting">
                        设置
                    </span>
                </li>
                <li class="form form-scenelist" style="display:none;">
                    <div class="form-menus">
                        <div class="popover bottom">
                            <div class="arrow">
                            </div>
                            <div class="popover-content">
                                <ul class="menus clearfix menus-scenelist">
                                    <li class="menu-item" ng-repeat="scene in vmSceneList" ng-click="navToScene(scene)"
                                        ng-class="{active:scene.id==vmCurrentSceneId}">
                                        <span class="menu-item-name">
                                            {{scene.name}}
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <span class="create-exchange" ng-mouseover="openSwitchScene()">
                        切换
                    </span>
                </li>
                <li class="act-border newuser hidden">
                    <span class="newuser" ng-click="newUserOpenrDesc($event)" title="开启/关闭新手指引">
                        {{sessionStorageXszy}}
                    </span>
                </li>
                <li class="act-border quit hidden">
                    <span class="create-help">
                        <a title="帮助" href="http://bbs.70c.com/forum.php?mod=viewthread&tid=218"
                           target="_blank" class="btnhelp" style="height: 46px;width: 60px;display: inline-block;">
                            帮助
                        </a>
                    </span>
                </li>
                <li class="act-border icon-exit">
                    <span class="create-exit">
                        <a title="退出" href="/index/appindex" style="height: 46px;width: 60px;display: inline-block;">
                            退出
                        </a>
                    </span>
                </li>
            </ul>
        </div>
        <div ng-hide="showToolBar();">
            <div ng-show="isEditor" style="position: absolute;right: -200px;top: 20px;">
                <select ng-model="tpl.obj.scene.isTpl">
                    <option value="0">
                        非模板
                    </option>
                    <option value="1">
                        保存为pc模板
                    </option>
                    <option value="2">
                        保存为移动端模板
                    </option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="create_scene" sidebar-layout>
    <div class="main clearfix" mouse-comp-select>
        <div class="content">

            <!--场景页列表-->
            <div id="containment" class="create_left">
                <div class="guanli">
                    页面管理
                </div>
                <div class="nav_top">
                    <div class="nav_top_list">
                        <a ng-click="creatCompanyTemplate()" ng-show="userProperty.type ==2">
                            企业模版
                        </a>
                    </div>
                </div>
                <ul class="list-thumb-page" ui-sortable="sortableOptions" ng-model="pages">
                    <li class="nr list-thumb-wrapper" thumb-page page="page" ng-repeat="page in pages"
                        ng-click="navTo(page, $index, $event)" ng-class="{current: pageNum-1 == $index}">
                        <div class="list-thumb-pager vcenter">
                            <span class="list-thumb-pager-num vcenter-child">
                                {{$index+1}}
                            </span>
                        </div>
                        <div class="list-thumb-action">
                            <div class="thumb-action-secondary">
                                <span class="thumb-action-secondary-item thumb-action-secondary-copy hint--right hint--rounded"
                                      data-hint="复制这一页">
                                    <i class="fa fa-files-o" ng-click="duplicatePage(page, $index, $event)">
                                    </i>
                                </span>
                                <span class="thumb-action-secondary-item thumb-action-secondary-user hint--right hint--rounded"
                                      data-hint="添加到我的">
                                    <i class="fa fa-user" ng-click="creatMyTemplate(page, $index, $event)">
                                    </i>
                                </span>
                                <span class="thumb-action-secondary-item thumb-action-secondary-trash hint--right hint--rounded"
                                      data-hint="删除这一页">
                                    <i class="fa fa-trash-o" ng-show="pages.length != 1">
                                    </i>
                                </span>
                                <span class="thumb-action-secondary-item thumb-action-secondary-page-up hint--left hint--rounded"
                                      data-hint="上移">
                                    <i class="glyphicon glyphicon-arrow-up" ng-show="pages.length != 1 && $index != 0"
                                       ng-click="movePage('up', page, $index, $event)">
                                    </i>
                                </span>
                                <span class="thumb-action-secondary-item thumb-action-secondary-page-down hint--left hint--rounded"
                                      data-hint="下移">
                                    <i class="glyphicon glyphicon-arrow-down" ng-show="pages.length != 1 && $index != pages.length - 1"
                                       ng-click="movePage('down', page, $index, $event)">
                                    </i>
                                </span>
                            </div>
                            <div class="thumb-rm-confirm" ng-click="deletePage(page, $index, $event)"
                                 ng-show="pages.length != 1">
                                <i class="fa fa-trash-o">
                                </i>
                                <span class="trash-confirm-tip">
                                    确认删除?
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="nav_bottom">
                    <a ng-click="insertPage()" class="" title="增加一页">
                        +
                        <span class="addnewpage">
                            添加新页面
                        </span>
                    </a>
                </div>
                <div ng-show="isEditor">
                    <div class="btn-main" ng-click="chooseThumb()">
                        选择本页缩略图
                    </div>
                    <img width="100" ng-src="">
                    </img>
                </div>
            </div>
            <!--编辑面板-->
            <div class="create_right">
                <tabset justified="true">
                    <tab heading="页面模版" class="hint--bottom hint--rounded" style="width: 290px;">
                        <tabset justified="true" class="tpl_tab">
                            <tab ng-repeat="pageTplType in pageTplTypes" heading="{{pageTplType.name}}"
                                 ng-click="getPageTplsByType(pageTplType.value)">
                                <div class="nav2 clearfix" dropdown>
                                    <ul class="clearfix nav2_list">
                                        <li ng-class="{active:childCat.id == categoryId}" ng-click="getPageTplTypestemp(childCat.id ,bizType)"
                                            ng-repeat="childCat in childCatrgoryList">
                                            {{childCat.name}}
                                        </li>
                                        <li ng-class="{active:othercat.id == categoryId}" ng-click="getPageTplTypestemp(othercat.id ,bizType)"
                                            ng-repeat="othercat in otherCategory">
                                            {{othercat.name}}
                                        </li>
                                    </ul>
                                </div>
                                <ul class="page_tpl_container clearfix">
                                    <li class="page_tpl_item" ng-repeat="pageTpl in pageTpls" class="comp-draggable"
                                        title="点击插入编辑区域" ng-click="insertPageTpl(pageTpl.id);">
                                        <img ng-src="{{PREFIX_FILE_HOST + pageTpl.properties.thumbSrc}}" />
                                    </li>
                                </ul>
                            </tab>
                            <tab ng-repeat="myname in myName" heading="{{myName[0].name}}" active="myname.active"
                                 ng-if="pageTplTypes" ng-click="getPageTplsByMyType()">
                                <div class="mytpl-tip" ng-hide="myPageTpls">
                                    <p id="mytpl-tiptxt">
                                        在左侧缩略图中，点击“添加到我的”图标按钮，即可生成我的页面模板！
                                    </p>
                                </div>
                                <ul class="page_tpl_container clearfix" ng-hide="myPageTpls.length < 1">
                                    <li thumb-tpl my-tpl="pageTpl" client-cdn="CLIENT_CDN" style="position: relative;"
                                        id="my-tpl" class="nr page_tpl_item comp-draggable" ng-repeat="pageTpl in myPageTpls"
                                        title="点击插入编辑区域" ng-click="insertPageTpl(pageTpl.id);">
                                    </li>
                                </ul>
                            </tab>
                            <!-- 获取企业模板 -->
                            <tab ng-repeat="mycompany in myCompany" heading="{{myCompany[0].name}}"
                                 active="mycompany.active" ng-if="pageTplTypes" ng-click="getPageTplsByCompanyType()"
                                 ng-show="userProperty.type ==2 || userProperty.type ==21">
                                <div style="padding:10px;" ng-hide="myCompanyTpls">
                                    在页面管理中选中页面，点击企业模板，即可生成企业页面模板！
                                </div>
                                <ul class="page_tpl_container clearfix">
                                    <li thumb-tpl my-tpl="pageTpl" style="position: relative;" id="company-tpl"
                                        class="nr page_tpl_item comp-draggable" ng-repeat="pageTpl in myCompanyTpls"
                                        title="点击插入编辑区域" ng-click="insertPageTpl(pageTpl.id);">
                                    </li>
                                </ul>
                            </tab>
                        </tabset>
                    </tab>
                </tabset>
            </div>
            <!--编辑区域-->
            <div class="phoneBox">
                <div>
                    <div class="top">
                    </div>
                    <div class="phone_menubar">
                    </div>
                    <div class="scene_title_baner">
                        <div ng-bind="tpl.obj.scene.name" class="scene_title">
                        </div>
                    </div>
                    <div class="bottom">
                    </div>
                    <div class="tips">
                        支持常用键盘操作, 例如ctrl+c, ctrl+v
                    </div>
                </div>
                <div class="phone_texiao">
                    <div id="editBG" style="display: none;">
                        <span class="hint--right hint--rounded" data-hint="选择新背景">
                            背景
                        </span>
                        <div style="margin:10px 0;border-bottom: 2px solid #666;">
                        </div>
                        <a style="color: #666;" class="hint--bottom hint--rounded" data-hint="删除当前页面的背景">
                            <span ng-click="removeBG($event)" class="glyphicon glyphicon-remove">
                            </span>
                        </a>
                    </div>
                    <div id="editBGAudio" ng-click="openAudioModal()" ng-show="tpl.obj.scene.image.bgAudio">
                        <span class="hint--right hint--rounded" data-hint="选择新音乐">
                            音乐
                        </span>
                        <div style="margin:10px 0;border-bottom: 2px solid #666;">
                        </div>
                        <a style="color: #666;" class="hint--bottom hint--rounded" data-hint="删除当前页面的音乐">
                            <span ng-click="removeBGAudio($event)" class="glyphicon glyphicon-remove">
                            </span>
                        </a>
                    </div>
                    <div id="editSayGood" ng-show="tpl.obj.scene.image.SayGood">
                        <span class="hint--right hint--rounded" data-hint="送祝福">
                            送祝福
                        </span>
                        <div style="margin:1px 0;border-bottom: 2px solid #666;">
                        </div>
                        <a style="color: #666;" class="hint--bottom hint--rounded" data-hint="删除当前页面的送祝福">
                            <span ng-click="removeSayGood($event)" class="glyphicon glyphicon-remove">
                            </span>
                        </a>
                    </div>
                    <div id="editScratch" ng-click="openOneEffectPanel(tpl.obj.properties)"
                         ng-show="tpl.obj.properties.scratch || tpl.obj.properties.finger">
                        <span class="hint--right hint--rounded" data-hint="选择新特效">
                            特效
                        </span>
                        <div style="margin:10px 0;border-bottom: 2px solid #666;">
                        </div>
                        <a style="color: #666;" class="hint--bottom hint--rounded" data-hint="删除当前页面特效">
                            <span ng-click="removeScratch($event)" class="glyphicon glyphicon-remove">
                            </span>
                        </a>
                    </div>
                </div>
                <div class="history">
                    <a data-hint="撤销(ctrl+z)" class="hint--left hint--rounded" ng-click="back()">
                        <i class="fa fa-reply" ng-class="{active: canBack}">
                            <span>
                                撤销
                            </span>
                        </i>
                    </a>
                    <a data-hint="恢复(ctrl+y)" class="hint--left hint--rounded" ng-click="forward()">
                        <i class="fa fa-share" ng-class="{active: canForward}">
                            <span>
                                恢复
                            </span>
                        </i>
                    </a>
                    <a data-hint="网格设置" class="hint--left hint--rounded grid-guide" style="margin-top:10px;"
                       ng-click="gridGuideSetting.showFlag = !gridGuideSetting.showFlag">
                        <i class="fa fa-th" ng-class="{active: gridGuideSetting.isGridEnabled}">
                            <span>
                                网格
                            </span>
                        </i>
                    </a>
                    <div class="grid-guide-container" ng-class="{on: gridGuideSetting.showFlag}"
                         grid-guide-setting>
                    </div>
                    <a title="刷新预览" style="margin-top:10px;" ng-click="refreshPage(tpl.obj, pageNum, $event)">
                        <i class="fa refresh">
                            <span>
                                预览
                            </span>
                        </i>
                    </a>
                </div>
            </div>
            <div multi-comp-drag edit-common edit-keymap>
                <div class="nr sortable" id="nr" element-anim>
                </div>
            </div>
            
            <div ng-include="'scene/edit/select/select.tpl.html'" ng-controller="selectCtrl">
            </div>
        </div>
    </div>
    <div class="scene-setting" ng-if="sceneSetting.showFlag" scene-setting-component>
    </div>
</div>